<template>
  <!-- <CommonForm :form="selectedComponent.style" :formJson="formJson" /> -->
  <CommonForm :onChange="handleChange" :formData="selectedComponent.style" :formJson="formJson" />
  <!-- <GeometricForm /> -->
</template>

<script >
import { mapState } from "vuex"
// import GeometricForm from "./GeometricForm"
import CommonForm from "@/components/CommonForm"
import getStyleFormJson from "../Style/style"
import EventBus from "../../../EventBus"
import { deepCopy, getComponentByKey, setSelectedComponent } from '../../../lib/utils'
export default {
  data () {
    return {

    }
  },
  methods: {
    handleChange (fieldName, value) {
      console.log(fieldName, value)

      this.selectedComponent.style[fieldName] = value
      setSelectedComponent(1, {
        data: this.selectedComponent
      })

      EventBus.$emit("setSelectComponentUpdateList", {})
    },
  },
  computed: {
    ...mapState('lowCode', {
      selectedComponent: state => state.selectedComponent,
      canvasComponentList: state => state.canvasComponentList
    }),
    formJson () {
      return getStyleFormJson("geometric")
    },
  },
  components: {
    CommonForm
  }
}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
